<template>
  <div>
    <el-col :span="12"
      ><el-button type="primary" @click="addClk">新增</el-button>
      <el-button type="success" @click="batchRemoveClk"
        >批量删除</el-button
      ></el-col
    >
    <el-col :span="12">
      <el-input
        placeholder="请输入内容"
        v-model="input"
        class="input-with-select"
      >
        <el-button
          slot="append"
          icon="el-icon-search"
          @click="doSearch"
        ></el-button>
      </el-input>
    </el-col>
    <el-table
      @selection-change="handleSelectionChange"
      :data="tableData"
      border
      style="width: 100%"
    >
      <el-table-column fixed type="selection" width="55"> </el-table-column>
      <el-table-column
        fixed
        type="index"
        width="50"
        label="#"
      ></el-table-column>
      <el-table-column prop="name" label="姓名" width="120"> </el-table-column>
      <el-table-column prop="gender" label="性别" width="120">
      </el-table-column>
      <el-table-column prop="age" label="年龄" width="120"> </el-table-column>
      <el-table-column prop="loginName" label="用户名" width="250">
      </el-table-column>
      <el-table-column prop="loginKey" label="密码" width="250">
      </el-table-column>
      <el-table-column fixed="right" label="操作" width="200">
        <template slot-scope="scope">
          <el-button @click="updateClk(scope.row)" type="text" size="small"
            >修改</el-button
          >
          <el-button type="text" size="small" @click="removeClk(scope.row.id)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <el-drawer
      :title="`${form.id ? '修改' : '新增'}用户`"
      :visible.sync="dialog"
      direction="rtl"
      custom-class="demo-drawer"
      ref="drawer"
    >
      <el-form ref="form" :model="form" label-width="80px">
        <el-form-item label="姓名">
          <el-input v-model="form.name"></el-input>
        </el-form-item>

        <el-form-item label="年龄">
          <el-input type="number" v-model="form.age"></el-input>
        </el-form-item>

        <el-form-item label="性别">
          <el-select v-model="form.gender" placeholder="请选择性别">
            <el-option label="男" value="男"></el-option>
            <el-option label="女" value="女"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="用户名">
          <el-input v-model="form.loginName"></el-input>
        </el-form-item>

        <el-form-item label="密码">
          <el-input v-model="form.loginKey" show-password></el-input>
        </el-form-item>

        <el-form-item label="头像">
          <el-upload
            class="avatar-uploader"
            action=""
            :show-file-list="false"
            :http-request="handlerUpload"
            ref="avatar"
          >
            <img
              v-if="form.avatar"
              :src="`http://localhost:3001/upload-files/${form.avatar}`"
              class="avatar"
            />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="doSubmit">立即创建</el-button>
          <el-button @click="cancelForm">取消</el-button>
        </el-form-item>
      </el-form>
    </el-drawer>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[2, 3, 5, 10]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
    >
    </el-pagination>
  </div>
</template>

<script>
import axios from "axios";
import { mapState, mapMutations, mapActions } from "vuex";
export default {
  data() {
    return {
      input: "",
      dialog: false,
      form: {
        avatar: "",
      },
      formLabelWidth: "80px",
      deleteIds: "",
      // imageUrl:''
    };
  },
  async mounted() {
    await this.getList();
  },
  methods: {
    ...mapActions("users", [
      "getList",
      "addUser",
      "deleteUser",
      "updateUser",
      "upload",
    ]),
    ...mapMutations("users", ["CURRENTPAGE", "PAGESIZE"]),
    // 头像上传
    handlerUpload() {
      let avatar = this.$refs.avatar.uploadFiles[0],
        fd = new FormData();
      fd.append("avatar", avatar.raw);
      axios.post("api/users/upload-avatar", fd).then((res) => {
        let filename = res.data.data.filename;
        this.form.avatar = filename;
      });
    },

    // 搜索
    async doSearch() {
      await this.getList(this.input);
      this.CURRENTPAGE(0);
    },

    // 当前页改变
    async handleCurrentChange(val) {
      await this.CURRENTPAGE(val);
      if (this.input) {
        await this.getList(this.input);
      } else {
        await this.getList();
      }
    },

    // 页数改变
    async handleSizeChange(val) {
      await this.PAGESIZE(val);
      if (this.input) {
        await this.getList(this.input);
      } else {
        await this.getList();
      }
    },

    // 点击全选
    handleSelectionChange(val) {
      this.ids = val
        .map((item) => {
          return item.id;
        })
        .join(",");
    },

    // 点击修改按钮
    updateClk(row) {
      this.form = { ...row };
      this.dialog = true;
    },

    // 删除
    async removeClk(id) {
      await this.deleteUser({ id });
    },

    // 新增
    addClk() {
      this.dialog = true;
    },

    //批量删除
    async batchRemoveClk() {
      await this.deleteUser({ id: this.ids });
    },

    // 提交表单
    async doSubmit() {
      if (this.form.id) {
        await this.updateUser(this.form);
      } else {
        await this.addUser(this.form);
      }
      this.dialog = false;
      this.clearForm();
    },

    // 取消提交
    cancelForm() {
      this.dialog = false;
      this.clearForm();
    },

    // 清空form
    clearForm() {
      this.form = {
        avatar: "",
      };
      this.imageUrl = "";
    },
  },
  computed: {
    ...mapState("users", ["tableData", "total", "currentPage", "pageSize"]),
  },
};
</script>

<style>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>